// src/hooks/useTitle.ts

import { watch, ref, onMounted, onBeforeUnmount } from 'vue'

const NAME = 'MySphere'

export function useTitle(newTitle: string) {
  const title = ref(newTitle)

  const updateTitle = () => {
    if (title.value) {
      document.title = title.value + ' - ' + NAME
    }
  }

  // 在组件挂载时更新标题
  onMounted(() => {
    updateTitle()
  })

  // 当标题发生变化时更新标题
  watch(title, updateTitle)

  // 返回函数以便在需要时手动更新标题
  return {
    setTitle: (newTitle: string) => {
      title.value = newTitle
    }
  }
}
